<template>
  <div class="tags">
    <div class="tags-main">
      <div class="tags-card">
        <div
          ref="scrollCon"
          class="tags-container"
          @mousewheel="handlescroll"
        >
          <div
            ref="scrollBody"
            class="tags-nav-scroll"
            :style="{left: tagBodyLeft + 'px'}"
          >
            <transition-group name="taglist-moving-animation">
              <div
                v-for="(item, index) in breadList"
                :key="index"
                class="ivu-tags-tab"
                :class="{'active': index == currentRoute}"
              >
                <div
                  class="tags-title"
                  @click="handleChange(index, item)"
                >
                  {{ item.menuName }}
                </div>
                <Icon
                  v-if="item.menuName !='我的博客'"
                  type="ios-close"
                  @click="handleClose(item, index)"
                ></Icon>
              </div>
            </transition-group>
          </div>
        </div>
        <Button
          class="left carousel-arrow"
          style="padding: 0 4px!important;height: 24px!important;"
          @click.native="tagsPageSlide(120)"
        >
          <Icon type="ios-arrow-back"></Icon>
        </Button>
        <Button
          class="right carousel-arrow"
          style="padding: 0 4px!important;height: 24px!important;"
          @click.native="tagsPageSlide(-120)"
        >
          <Icon type="ios-arrow-forward"></Icon>
        </Button>
      </div>
      <div class="tags-close"></div>
    </div>
  </div>
</template>
<script>
import { smallMenuList } from '@/common/constValue.js';
export default {
  data() {
    return {
      breadList: [{
        menuName: '我的博客',
        menuCode: 'myBlog',
        path: '/my-blog',
        iconCls: 'md-settings'
      }],
      currentRoute: 0,
      tagBodyLeft: 0
    };
  },
  watch: {
    $route(route) {
      this.getBreadcrumb();
    }
  },
  created() {
    this.breadList = JSON.parse(sessionStorage.getItem('BreadList')) || [];
    this.getBreadcrumb();
  },
  methods: {
    tagsPageSlide(val) {
      let left = 0;
      if (val > 0) {
        left = Math.min(0, this.tagBodyLeft + val);
      } else {
        if (this.$refs.scrollCon.offsetWidth - 100 < this.$refs.scrollBody.offsetWidth) {
          if (this.tagBodyLeft < -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100)) {
            left = this.tagBodyLeft;
          } else {
            left = Math.max(
              this.tagBodyLeft + val,
              this.$refs.scrollCon.offsetWidth - this.$refs.scrollBody.offsetWidth - 100
            );
          }
        } else {
          this.tagBodyLeft = 0;
        }
      }
      this.tagBodyLeft = left;
    },
    handlescroll(e) {
      let left = 0;
      if (e.wheelDelta > 0) {
        left = Math.min(0, this.tagBodyLeft + e.wheelDelta);
      } else {
        if (this.$refs.scrollCon.offsetWidth - 100 < this.$refs.scrollBody.offsetWidth) {
          if (this.tagBodyLeft < -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100)) {
            left = this.tagBodyLeft;
          } else {
            left = Math.max(
              this.tagBodyLeft + e.wheelDelta,
              this.$refs.scrollCon.offsetWidth - this.$refs.scrollBody.offsetWidth - 100
            );
          }
        } else {
          this.tagBodyLeft = 0;
        }
      }
      this.tagBodyLeft = left;
    },
    // 删除标签
    handleClose(item, index) {
      let routerInfo = this.getRouterInfo()[0];
      if ((item.path === routerInfo.path) && (item.menuCode === routerInfo.menuCode)) { // 删除高亮项
        let goPath = '';
        let menuName = '';
        let parentMenuName = '';
        if (index === this.breadList.length - 1) {
          goPath = this.breadList[index - 1].path;
          menuName = this.breadList[index - 1].menuName;
          parentMenuName = this.breadList[index - 1].parentMenuName;
        } else {
          goPath = this.breadList[index + 1].path;
          menuName = this.breadList[index + 1].menuCode;
          parentMenuName = this.breadList[index + 1].menuCode;
        };
        this.$router.push({ path: goPath });
        sessionStorage.setItem('curMenu',parentMenuName+'-'+menuName);
        this.getBreadcrumb();
        this.breadList.splice(index, 1);
      } else {
        this.breadList.splice(index, 1);
        this.getBreadcrumb();
      }
    },

    // 点击切换标签
    handleChange(index, item) {
      const { path = '', menuCode = '', menuName ='', parentMenuName = '' } = item;
      if (path === this.$route.path) return;
      this.currentRoute = index;
      if (menuCode) {
        sessionStorage.setItem('curMenu',parentMenuName+'-'+menuName);
        this.$router.push({ path });
      } else {
        this.$router.push({ path });
      }
    },

    // 获取标签list
    getBreadcrumb() {
      // 塞入缓存
      if (this.$route.path === '/login') this.breadList = [];
      sessionStorage.setItem('BreadList', JSON.stringify(this.breadList));

      let routerInfo = this.getRouterInfo();
      if(!(routerInfo && routerInfo.length > 0)) {
        return;
      }
      let { path = '', menuCode = '', menuName = '', parentMenuName = '' } = routerInfo[0];
      menuName = menuName || '我的博客';

      if(path === "/" && menuCode ==="") return;
      // 是否存在该路由
      var hasRoute = this.breadList.some((item, index) => {
        if ((item.path === path) && (item.menuCode === menuCode)) {
          return true;
        }
      });

      // 不存在则存入list
      if (!hasRoute && menuName) {
        this.breadList.push({ path, menuName, menuCode, parentMenuName });
      }

      // 当前路由添加高亮
      this.breadList.forEach((item, index) => {
        if ((item.path === path) && (item.menuCode === menuCode)) {
          this.currentRoute = index;
          document.menuName = item.menuName;
        }
      });
    },
    getRouterInfo() {
      return smallMenuList.filter( item => {
        return this.$route.path === item.path;
      })
    }
  }
};

</script>
<style scoped lang="less">
.tags {
  // transition: all 0.2s ease-in-out;
  position: fixed;
  top: 50px;
  left: 200px;
  right: 0;
  z-index: 10;
  background: #fff;
  padding: 10px 20px 0 20px;
  .tags-main {
    .tags-card {
      .tags-container {
        margin: 0 40px;
        height: 32px;
        line-height: 1.5;
        font-size: 14px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        zoom: 1;
        .tags-nav-scroll {
          position: absolute;
          overflow: visible;
          white-space: nowrap;
          transition: left .3s ease;
        }
        .ivu-tags-tab {
          height: 24px;
          border-radius: 3px;
          border: none;
          margin-right: 6px;
          color: #808695;
          display: inline-block;
          padding: 2px 16px 4px;
          box-sizing: border-box;
          border: 1px solid #eeeeee;
          cursor: pointer;
          text-decoration: none;
          position: relative;
          font-size: 12px;
          .tags-title {
            display: inline-block;
            span {
              display: inline-block;
              vertical-align: middle;
            }
          }
          &:hover {
            border: 1px solid #ffbb96 !important;
          }
          .ivu-icon-ios-close:before {
            margin-right: -12px;
          }
          i.ivu-icon {
            width: 22px;
            transform: translateZ(0);
            margin-right: -6px;
          }
        }
      }
    }
  }
}
.ivu-tags-tab.active {
  border: 1px solid #ffbb96 !important;
  background: #FEF5EA;
  color: #F99C34 !important;
}
.ivu-tags-tab.active .ivu-icon-ios-close:before {
  color: #ffbb96;
}
.left.carousel-arrow {
  position: absolute;
  left: 20px;
  top: 10px;
  min-width: 24px!important;
}
.right.carousel-arrow {
  position: absolute;
  right: 20px;
  top: 10px;
  min-width: 24px!important;
}
</style>
